body {
    background: #282c34;
}

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    border-radius: 3px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
    background: #000;
    overflow: hidden;
    filter: contrast(25);
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ball {
    width: 90px;
    height: 90px;
    position: relative;
    background: #fff;
    border-radius: 50%;
    filter: blur(15px);
}

/* 中心大球 */
@for $i from 1 through 8 {
    .absorb_#{$i} {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 50px;
        height: 50px;
        transform: rotate((random(300)) + deg);

        &:after {
            position: absolute;
            display: block;
            content: '';
            width: 50px;
            height: 50px;
            background: #fff;
            border-radius: 50%;
            transform-origin: (40 - $i * 3) + px (40 - $i * 3) + px;
            animation: rotate (2.5 + $i / 5) + s ease-in-out ($i / 5) + s infinite;
            filter: blur(5px);
        }
    }
}

/* 环绕小球 */
@for $i from 1 through 10 {
    .sparkle_#{$i} {
        position: absolute;
        top: 38px;
        left: 38px;
        width: (7 + $i) + px;
        height: (7 + $i) + px;
        transform: rotate((random(360)) + deg);

        &:after {
            position: absolute;
            display: block;
            content: '';
            width: (7 + $i) + px;
            height: (7 + $i) + px;
            background: #fff;
            border-radius: 50%;
            transform-origin: (60 - $i * 2) + px (60 - $i * 2) + px;
            animation: rotate (3.5 + $i / 5) + s ease-in-out ($i / 5) + s infinite;
            filter: blur(3px);
        }
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}